<template>
  <div class="tagsPie">
    <div class="tagsPieBox">
      <div class="tagsPieTag">
        <div class="pointBox">
          <div class="point" :style='{ backgroundColor: theColorList[0] }'></div>
        </div>
        <div class="dataBox">
          <div class="dataBoxName">{{ data[0].name }}</div>
          <div class="dataBoxData">
            <div>{{ dataHandled[0] }}</div>
            <div>{{ percentOne }}%</div>
          </div>
        </div>
      </div>
      <div class="tagsPieTag">
        <div class="pointBox">
          <div class="point" :style='{ backgroundColor: theColorList[1] }'></div>
        </div>
        <div class="dataBox">
          <div class="dataBoxName">{{ data[1].name }}</div>
          <div class="dataBoxData">
            <div>{{ dataHandled[1] }}</div>
            <div>{{ percentTwo }}%</div>
          </div>
        </div>
      </div>
    </div>
    <div class="theTagsPie" :id=id style="height: 160px;width: 160px;"></div>
  </div>
</template>
<script setup>
import * as echarts from 'echarts';
import { computed, onMounted } from 'vue';

const props = defineProps({
  data: Object
})
const id = props.data.id;
const data = props.data.data;
const sum = props.data.sum;
const type = props.data.type;
const theColorList = props.data.theColorList;
const sumOrSingle = props.data.sumOrSingle

let dataHandled = computed(() => {
  let dataArr = [];
  for (let j = 0; j <= data.length - 1; j++) {
    let result = [], counter = 0;
    let theData = data[j].value.toString();
    let num = theData;
    for (let i = num.length - 1; i >= 0; i--) {
      counter++;
      result.unshift(num[i]);
      if (!(counter % 3) && i != 0) { result.unshift(','); }
    }
    let theValue = result.join('');
    dataArr.push(theValue);
  }
  return dataArr
})
let theSum = computed(() => {
  let result = [], counter = 0;
  let theData = sum.toString();
  let num = theData;
  for (let i = num.length - 1; i >= 0; i--) {
    counter++;
    result.unshift(num[i]);
    if (!(counter % 3) && i != 0) { result.unshift(','); }
  }
  let theValue = result.join('')
  return theValue
})

const percentOne = computed(() => {
  return (data[0].value * 100 / sum).toFixed(1)
}).value.toString()
const percentTwo = computed(() => {
  return (data[1].value * 100 / sum).toFixed(1)
}).value.toString()


onMounted(() => {
  if (sumOrSingle === undefined) {
    getThePie()
  } else {
    getTheSumPie()
  }
})
const getTheSumPie = () => {
  var chartDom = document.getElementById(id);
  var myChart = echarts.init(chartDom);
  var option;
  option = {
    color: theColorList,
    tooltip: {
      trigger: 'item'
    },
    series: [
      {
        clockwise: false,
        type: 'pie',
        radius: ['80%', '95%'],
        avoidLabelOverlap: false,
        padAngle: 5,
        itemStyle: {
          color: '#ffffff00'
        },
        label: {
          show: true,
          position: 'center',
          color: '#ffffff',
          formatter: (params) => {
            return `{font|${sumOrSingle}}\n\n{a|${theSum.value}}`
          },
          rich: {
            font: {
              fontFamily: "PingFang-Medium"
            },
            a: {
              fontSize: 18,
              fontWeight: 600,
              fontFamily: "PingFang-Bold"
            }
          }
        },
        emphasis: {
          disabled: true
        },
        labelLine: {
          show: false
        },
        data: data
      },
      {
        zlevel: 2,
        clockwise: false,
        type: 'pie',
        radius: ['80%', '95%'],
        avoidLabelOverlap: false,
        padAngle: 5,
        itemStyle: {
          borderRadius: 0
        },
        label: {
          show: false,
        },
        emphasis: {
        },
        labelLine: {
          show: false
        },
        data: [
          {
            value: data[0].value,
            name: data[0].name,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 0,
                  color: `${theColorList[0]}00`
                },
                {
                  offset: 1,
                  color: `${theColorList[0]}ff`
                }
              ])
            }
          },
          {
            value: data[1].value,
            name: data[1].name,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: `${theColorList[1]}00`
                },
                {
                  offset: 1,
                  color: `${theColorList[1]}ff`
                }
              ])
            }
          }
        ]
      }
    ]
  };
  option && myChart.setOption(option);
}
const getThePie = () => {
  var chartDom = document.getElementById(id);
  var myChart = echarts.init(chartDom);
  var option;
  option = {
    tooltip: {
      trigger: 'item'
    },
    series: [
      {
        clockwise: false,
        type: 'pie',
        radius: ['80%', '95%'],
        avoidLabelOverlap: false,
        padAngle: 5,
        itemStyle: {
          borderRadius: 0
        },
        label: {
          show: false,
          position: 'center',
          color: '#ffffff',
          // formatter: (params) => {
          //   if (params.dataIndex == 0) {
          //     if (type == 'value') {
          //       return `{font|${params.name}}\n\n{a|${dataHandled.value[params.dataIndex]}}`
          //     } else if (type == 'percent') {
          //       return `{font|${params.name}}率占比\n\n{a|${params.percent}%}`
          //     }
          //   } else if (params.dataIndex != 0) {
          //     return
          //   }
          // },
          // rich: {
          //   font: {
          //     fontSize: 14,
          //     fontFamily: 'PingFang-Medium'
          //   },
          //   a: {
          //     fontSize: 18,
          //     fontWeight: 600,
          //     fontFamily: 'PingFang-Bold'
          //   }
          // }
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 14,
            color: '#ffffff',
            formatter: (params) => {
              // if (params.dataIndex != 0) {
              //   if (type == 'value') {
              //     return `{font|${params.name}}\n\n{a|${dataHandled.value[params.dataIndex]}}`
              //   } else if (type == 'percent') {
              //     return `{font|${params.name}}率占比\n\n{a|${params.percent}%}`
              //   }
              // } else if (params.dataIndex == 0) {
              //   return
              // }
              if (type == 'value') {
                return `{font|${params.name}}\n\n{a|${dataHandled.value[params.dataIndex]}}`
              } else if (type == 'percent') {
                return `{font|${params.name}}率占比\n\n{a|${params.percent}%}`
              }
            },
            rich: {
              font: {
                fontSize: 14,
                fontFamily: 'PingFang-Medium'
              },
              a: {
                fontSize: 18,
                fontWeight: 600,
                fontFamily: 'PingFang-Bold'
              }
            }
          }
        },
        labelLine: {
          show: false
        },
        data: [
          {
            value: data[0].value,
            name: data[0].name,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: `${theColorList[0]}00`
                },
                {
                  offset: 1,
                  color: `${theColorList[0]}ff`
                }
              ])
            }
          },
          {
            value: data[1].value,
            name: data[1].name,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [
                {
                  offset: 0,
                  color: `${theColorList[1]}00`
                },
                {
                  offset: 1,
                  color: `${theColorList[1]}ff`
                }
              ])
            }
          },
        ]
      }
    ]
  };
  // myChart.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: 0 });
  // myChart.dispatchAction({ type: 'highlight' })
  option && myChart.setOption(option);
  myChart.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: 0 });
  myChart.on('mouseover', (params) => {
    if (params.dataIndex != 0) {
      myChart.dispatchAction({
        type: 'downplay',
        seriesIndex: 0,
        dataIndex: 0
      })
    }
  });
  myChart.on('mouseout', (params) => {
    if (params.dataIndex != 0) {
      myChart.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        dataIndex: 0
      })
    }
  })
}
</script>
<style scoped>
.tagsPie {
  display: flex;
  gap: 44px;

  padding-inline: 20px;
  padding-block: 50px;
}

.tagsPieBox {
  display: flex;
  gap: 22px;
  flex-direction: column;
}

.tagsPieTag {
  width: 220px;
  height: 66px;
  background-image: url('@/assets/images/tagsPieTag.png');

  display: flex;
  gap: 8px;

  padding-top: 12px;
  padding-left: 12px;
}

.pointBox {
  display: flex;
  align-items: baseline;
  padding-top: 5px;
}

.point {
  height: 8px;
  width: 8px;

}

.dataBox {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dataBoxName {
  color: #C6DDFF;
  font-size: 14%;
  font-family: "PingFang-Medium"
}

.dataBoxData {
  display: flex;
  justify-content: space-between;
  gap: 85px;

  color: #ffffff;
  font-size: 16px;
  font-family: "PingFang-Bold"
}

.theTagsPie {
  background-image: url('@/assets/images/tagsPieFilling.png');
  background-repeat: no-repeat;
  background-position: center;
}
</style>